<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head lang="zh-CN">
    <base href="<%=basePath%>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>e安全（人脸识别门禁）</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .round {
            padding: 5px;
            border: 0px solid #dedede;
            -moz-border-radius: 5px; /* Gecko browsers */
            -webkit-border-radius: 5px; /* Webkit browsers */
            border-radius: 5px; /* W3C syntax */
        }

        .round1 {
            padding: 10px;
            width: 300px;
            height: 50px;
            border: 0px solid #dedede;
            -moz-border-radius: 5px; /* Gecko browsers */
            -webkit-border-radius: 5px; /* Webkit browsers */
            border-radius: 5px; /* W3C syntax */
        }

        #imghead2 {
            width: 20px;
            height: 20px;
            border-radius: 200px;
        }

        #imghead3 {
            width: 40px;
            height: 40px;
            border-radius: 200px;
        }

        .loadingWrap {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 300;
            background-image: url(csh/image/loading.gif);
            background-repeat: no-repeat;
            background-position: center center;
            background-color: #000;
            background-color: rgba(0, 0, 0, 0.5);
            filter: alpha(opacity=50);
        }
    </style>
    <script type="text/javascript" src="jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="layer/2.4/layer.js"></script>
    <script type="text/javascript">
        function Determine() {
            var phone = /^[0-9]{3,30}$/;
            var cardnumber = document.getElementById("cardnumber").value;
            var s = document.getElementById("img").src;
            var src = s.substring(s.lastIndexOf("/") + 1);
            if (!phone.test(cardnumber)) {
                alert("请输入3至30数字卡号");
            } else if (src == "") {
                alert("图片不能为空");
            } else {
                var openid = document.getElementById("openid").value;
                var yphone = document.getElementById("mobile").value;
                var yid = document.getElementById("yid").value;
                $.ajax({
                    url: "${basePath}/card/buy",
                    data: {
                        moblie: openid,
                        yphone: yphone,
                        yid: yid
                    },
                    beforeSend: function (XMLHttpRequest) {
                        document.getElementById("imghead3").style.display = "block";
                        document.getElementById("button").style.display = "none";
                    },
                    success: function (data) {
                        var s = JSON.parse(data);
                        if (s.code == 0) {
                            if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                                ios(s.content.colour_sn, 'http://wwl.ycws.cc/h5/card/returned', openid, yphone); 	//苹果调用代码
                            } else {
                                android(s.content.colour_sn, 'http://wwl.ycws.cc/h5/card/returned', openid, yphone);//android调用代码
                            }
                        } else if (s.code == 427) {
                            alert("商户订单号已经存在");
                        }
                    },
                    fail: function () {
                        alert("下单失败");
                    }
                });
            }
        }

        function selectCard() {
            var phone = /^[0-9]{3,30}$/;
            var cardnumber = document.getElementById("cardnumber").value;
            var community_name = document.getElementById("community_name").value;
            if (!phone.test(cardnumber)) {
                alert("请输入3至30数字卡号");
            } else {
                $.ajax({
                    url: "${basePath}/card/selectCard",
                    type: "get",
                    data: {
                        cardnumber: cardnumber,
                        community_name: community_name
                    },
                    beforeSend: function (XMLHttpRequest) {
                        document.getElementById("imghead2").style.display = "block";
                    },
                    success: function (data) {
                        document.getElementById("imghead2").style.display = "none";
                        var json = JSON.parse(data);
                        console.log(json);
                        if (json.list.length == 0) {
                            document.getElementById("img").src = "";
                            document.getElementById("img").style.display = "none";
                            document.getElementById("divCenter").innerHTML = "您好,卡号不存在或者输入错误,请重新检查输入";
                        } else if (json.list.length >= 2) {
                            document.getElementById("img").src = "";
                            document.getElementById("img").style.display = "none";
                            document.getElementById("divCenter").innerHTML = "卡号重复绑定多个用户,请联系管理员处理";
                        } else if (json.list[0].yname == "") {
                            document.getElementById("img").src = "";
                            document.getElementById("img").style.display = "none";
                            document.getElementById("divCenter").innerHTML = "您好,此卡号未绑定公众号,请在pad上扫脸,在通过显示出来的微信二维码进行信息绑定";
                        } else {
                            console.log("查询成功");
                            document.getElementById("divCenter").innerHTML = "";
                            document.getElementById("img").style.display = "block";
                            document.getElementById("img").src = json.list[0].yfilename;
                            document.getElementById("yid").value = json.list[0].yid;
                        }
                    },
                    fail: function () {
                        alert("请求异常,请重试");
                    }
                });
            }
        }
    </script>
    <script type="text/javascript">
        function ios(sn, url, openid, yphone) {
            varurl = "*payFromHtml5*" + sn + "*" + url + "?openid=" + openid + "&yphone=" + yphone;
            location.href = url;
        }

        /*
         *注意：(对于ios)支付成功返回界面的时候，如果有先提示一个404报错，然后跳转到回调的地址页面，请使用下面的方法
         */
        function ios(sn, url, openid, yphone) {
            loadURL("*payFromHtml5*" + sn + "*" + url + "?openid=" + openid + "&yphone=" + yphone);
        }

        function loadURL(url) {
            var iFrame;
            iFrame = document.createElement("iframe");
            iFrame.setAttribute("src", url);
            iFrame.setAttribute("style", "display:none;");
            iFrame.setAttribute("height", "0px");
            iFrame.setAttribute("width", "0px");
            iFrame.setAttribute("frameborder", "0");
            document.body.appendChild(iFrame);
            // 发起请求后这个iFrame就没用了，所以把它从dom上移除掉
            iFrame.parentNode.removeChild(iFrame);
            iFrame = null;
        }
    </script>
    <script type="text/javascript">
        /* 3.JS调用Android代码
         * 格式：jsObject.payFromHtml(彩之云订单号，回调状态地址);
         * jsObject.payFromHtml此方法是固定的方法名,安卓会自动识别
         * @paramsn彩之云订单号
         * @paramurl回调地址
         * @return
         * 2015.5.6
         */
        function android(sn, url, openid, yphone) {
            jsObject.payFromHtml(sn, url + "?openid=" + openid + "&yphone=" + yphone);
        }
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <table width="100%" height="100%">
            <tr height="15%">
                <td colspan="3" align="center"><img alt="" src="img/1204650566.jpg" style="width: 100%"></td>
            </tr>
            <tr height="5%">
                <td colspan="3" align="center"></td>
            </tr>
            <tr height="5%">
                <td align="right" style="font-size: 12px; width: 20%">
                    卡号输入
                </td>
                <td align="center" style="width: 60%;">
                    &nbsp;&nbsp;&nbsp;<input type="text" id="cardnumber" style="width: 80%;"/>&nbsp;&nbsp;&nbsp;
                </td>
                <td align="center" style="width: 20%;">
                    <input id="select" type="button" onclick="selectCard()" value="查询"
                           style="width: 70px; background-color: #49a1f2; color: white; font-size: 16px; display: block;"
                           class="round">
                </td>
            </tr>
            <tr height="2%" align="center">
                <td colspan="3">
                    <img id="imghead2" src="http://wwl.ycws.cc/image/backgroundimage/2.gif" style="display: none;">
                </td>
            </tr>
            <tr height="35%">
                <td align="center">
                </td>
                <td align="center">
                    <div style="border: 1px solid gray; height: 60%; width: 80%; font-size: 12px; color: red;">
                        <span id="divCenter"></span>
                        <img alt="" id="img" src=""
                             style="width: 100px; height: 100px; margin-top: 15px; display: none;">
                    </div>
                    <br>
                    <input type="button" id="button" onclick="Determine()" value="确定" class="round1"
                           style="height: 50px;  width: 80%; background-color: #49a1f2; color: white; font-size: 16px; display: block;">
                    <img id="imghead3" src="http://wwl.ycws.cc/image/backgroundimage/2.gif" style="display: none;">
                </td>
                <td align="center">
                </td>
            </tr>
            <tr height="38%">
                <td align="center" colspan="3">
                    <div style="padding-left: 10%; padding-right: 10%;">
                        <font style="color: red; font-size: 14px;">
                            注意:请确认你的小区位置，如您在深圳花乡小区注册的，需要将彩之云的小区信息改为深圳花乡
                        </font></div>
                    <input type="hidden" name="openid" id="openid" value="${openid}"/><br>
                    <input type="hidden" name="mobile" id="mobile" value="${mobile}"/><br>
                    <input type="hidden" name="community_name" id="community_name" value="${community_name}"/><br>
                    <input type="hidden" name="yid" id="yid" value=""/><br>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>
